<template>
	<view class="store-list-page">
		<view style="height: 1rpx;width: 100%;"></view>
		
		<!-- 门店列表 -->
		<view class="store-list">
			<view v-for="store in storeList" :key="store.id" class="store-item" @click="selectStore(store)">
				<view class="store-info">
					<view class="store-icon">
						<image src="/pagesA/static/dw.png" style="width: 94rpx;height: 94rpx;" mode=""></image>
					</view>
					<view class="store-details">
						<view class="store-name">{{ store.name }}</view>
						<view class="store-address">{{ store.detail }}</view>
						<view class="store-address">{{ store.address }}</view>
					</view>
				</view>
				<!-- <view class="store-action">
					<image src="/pagesA/static/sel.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	// 响应式数据
	const selectedStore = ref(null)
	const latitude = ref(null)
	const longitude = ref(null)

	// 门店列表数据
	const storeList = ref([])

	/**
	 * 选择门店
	 * @param {Object} store - 门店信息
	 */
	const selectStore = (store) => {
		selectedStore.value = store
		// 延迟返回，让用户看到选中效果
		uni.redirectTo({
			url: '/pagesA/view/waterBar/index?venueId='+store.id
		});
	}

	// 获取门店列表
	const getStoreList = () => {
		uni.api.getMiniHomeVenue({
		}).then(res => {
			if (res.code == 0) {
				storeList.value = res.data || [];
			}
		});
	}

	// 页面加载时获取当前选中的门店
	onLoad((options) => {
		getStoreList();
	})
</script>

<style scoped lang="scss">
	.store-list-page {
		background: #f8f8f8;
		min-height: 100vh;
	}

	/* 门店列表 */
	.store-list {
		padding: 0;

		.store-item {
			width: 690rpx;
			height: 220rpx;
			background: #fff;
			padding:0 32rpx;
			box-sizing: border-box;
			margin: 30rpx auto 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.1);

			.store-info {
				flex: 1;
				display: flex;
				align-items: flex-start;

				.store-icon {
					margin-right: 24rpx;
					margin-top: 8rpx;
				}

				.store-details {
					flex: 1;

					.store-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 12rpx;
						font-weight: bold;
					}

					.store-address {
						font-size: 28rpx;
						color: #666;
						line-height: 1.5;
						width: 450rpx;
					}
				}
			}

			.store-action {
				padding-bottom: 30rpx;
				.select-btn {
					width: 48rpx;
					height: 48rpx;
					border: 2px solid #ddd;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s ease;

					&.active {
						background: #333;
						border-color: #333;
					}
				}
			}
		}
	}
</style>